var m = Object.defineProperty;
var x = (d, t, e) => t in d ? m(d, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : d[t] = e;
var s = (d, t, e) => (x(d, typeof t != "symbol" ? t + "" : t, e), e);
import { property as u, state as b, customElement as C, QuarkElement as h, createRef as w } from "quarkc";
const D = `.quark-code-input-container{position:relative}.code-input>input{border:solid 1px #a8adb7;border-right:none;font-family:Lato;font-size:20px;color:#525461;text-align:center;box-sizing:border-box;border-radius:0;-webkit-appearance:initial}.code-input>input:last-child{border-right:solid 1px #a8adb7;border-top-right-radius:6px;border-bottom-right-radius:6px}.code-input>input:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.code-input>input:focus{outline:none;border:1px solid #006fff;caret-color:#006fff}.code-input>input:focus+input{border-left:none}.loading{position:absolute;left:0;right:0;bottom:0;text-align:center}.blur{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#fff;opacity:.5;filter:blur(.5px);transition:opacity .3s}.title{margin:0;height:20px;padding-bottom:10px}.spin{display:inline-block;animation:loadingCircle 1s infinite linear}@keyframes loadingCircle{to{transform:rotate(360deg)}}
`;
var I = Object.defineProperty, N = Object.getOwnPropertyDescriptor, l = (d, t, e, i) => {
  for (var r = i > 1 ? void 0 : i ? N(t, e) : t, o = d.length - 1, p; o >= 0; o--)
    (p = d[o]) && (r = (i ? p(t, e, r) : p(r)) || r);
  return i && r && I(t, e, r), r;
};
const f = {
  backspace: 8,
  left: 37,
  up: 38,
  right: 39,
  down: 40
};
let a = class extends h {
  constructor() {
    super(...arguments);
    // 外部属性
    s(this, "count", 0);
    s(this, "type", "number");
    s(this, "className", "");
    s(this, "fields", 6);
    s(this, "fieldWidth", 58);
    s(this, "fieldHeight", 54);
    s(this, "title", "");
    s(this, "autoFocus", !0);
    s(this, "disabled", !1);
    s(this, "required", !1);
    s(this, "loading", !1);
    s(this, "values", []);
    s(this, "iRefs", []);
    s(this, "pid", 0);
    s(this, "autoFocusIndex", 0);
    s(this, "data", () => {
      const { fields: t, values: e } = this;
      let i, r = 0;
      if (e && e.length) {
        i = [];
        for (let o = 0; o < t; o++)
          i.push(e[o] || "");
        r = e.length >= t ? 0 : e.length;
      } else
        i = Array(t).fill("");
      this.pid = +/* @__PURE__ */ new Date(), this.values = i, this.autoFocusIndex = r;
    });
    s(this, "onFocus", (t) => {
      t.target.select(t);
    });
    s(this, "onValueChange", (t) => {
      const e = parseInt(t.target.dataset.id), { type: i, fields: r } = this;
      if (i === "number" && (t.target.value = t.target.value.replace(/[^\d]/gi, "")), t.target.value === "" || i === "number" && !t.target.validity.valid)
        return;
      let o;
      const p = t.target.value;
      let { values: n } = this;
      if (n = Object.assign([], n), p.length > 1) {
        let c = p.length + e - 1;
        c >= r && (c = r - 1), o = this.iRefs[c], p.split("").forEach((y, v) => {
          const g = e + v;
          g < r && (n[g] = y);
        }), this.values = n;
      } else
        o = this.iRefs[e + 1], n[e] = p, this.values = n;
      if (o) {
        const c = o.current;
        c.focus(), c.select();
      }
      this.triggerChange(n);
    });
    s(this, "onKeyDown", (t) => {
      const e = parseInt(t.target.dataset.id), i = e - 1, r = e + 1, o = this.iRefs[i], p = this.iRefs[r];
      switch (t.keyCode) {
        case f.backspace: {
          t.preventDefault();
          const n = [...this.values];
          this.values[e] ? (n[e] = "", this.values = n, this.triggerChange(n)) : o && (n[i] = "", o.current.focus(), this.values = n, this.triggerChange(n));
          break;
        }
        case f.left:
          t.preventDefault(), o && o.current.focus();
          break;
        case f.right:
          t.preventDefault(), p && p.current.focus();
          break;
        case f.up:
        case f.down:
          t.preventDefault();
          break;
      }
    });
    s(this, "triggerChange", (t = this.values) => {
      const { fields: e } = this, i = t.join("");
      this.$emit("change", {
        detail: i
      }), i.length >= e && this.$emit("complete", {
        detail: i
      });
    });
    s(this, "renderTitle", () => this.title ? /* @__PURE__ */ h.h("p", { class: "title" }, this.title) : null);
    s(this, "renderCodeInput", () => {
      let t = {
        width: `${this.fieldWidth}px`,
        height: `${this.fieldHeight}px`
      };
      return this.values.map((e, i) => (this.iRefs[i] || (this.iRefs[i] = w()), /* @__PURE__ */ h.h(
        "input",
        {
          type: this.type == "number" ? "tel" : this.type,
          pattern: this.type == "number" ? "[0-9]*" : null,
          autofocus: this.autoFocus && !this.loading && this.autoFocusIndex === i,
          style: t,
          "data-id": i,
          value: e,
          ref: this.iRefs[i],
          onInput: this.onValueChange,
          onFocus: this.onFocus,
          onKeyDown: this.onKeyDown,
          disabled: this.disabled,
          required: this.required,
          maxlength: "1"
        }
      )));
    });
    s(this, "renderLoad", () => {
      let t = {
        lineHeight: `${this.fieldHeight}px`
      };
      return this.loading ? /* @__PURE__ */ h.h("div", { className: "loading", style: t }, /* @__PURE__ */ h.h("div", { className: "blur" }), /* @__PURE__ */ h.h(
        "svg",
        {
          class: "spin",
          viewBox: "0 0 1024 1024",
          "data-icon": "loading",
          width: "1em",
          height: "1em",
          fill: "currentColor",
          "aria-hidden": "true"
        },
        /* @__PURE__ */ h.h(
          "path",
          {
            fill: "#006fff",
            d: "M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
          }
        )
      )) : null;
    });
  }
  componentDidMount() {
    this.data();
  }
  render() {
    return /* @__PURE__ */ h.h(
      "div",
      {
        className: `quark-code-input-container ${this.className || ""}`,
        style: `width: ${this.fields * this.fieldWidth}px`
      },
      this.renderTitle(),
      /* @__PURE__ */ h.h("div", { className: "code-input" }, this.renderCodeInput()),
      this.renderLoad()
    );
  }
};
l([
  u({ type: Number })
], a.prototype, "count", 2);
l([
  u({ type: String })
], a.prototype, "type", 2);
l([
  u({ type: String })
], a.prototype, "className", 2);
l([
  u({ type: Number })
], a.prototype, "fields", 2);
l([
  u({ type: Number })
], a.prototype, "fieldWidth", 2);
l([
  u({ type: Number })
], a.prototype, "fieldHeight", 2);
l([
  u({ type: String })
], a.prototype, "title", 2);
l([
  u({ type: Boolean })
], a.prototype, "autoFocus", 2);
l([
  u({ type: Boolean })
], a.prototype, "disabled", 2);
l([
  u({ type: Boolean })
], a.prototype, "required", 2);
l([
  u({ type: Boolean }),
  b()
], a.prototype, "loading", 2);
l([
  b()
], a.prototype, "values", 2);
a = l([
  C({ tag: "code-input", style: D })
], a);
